<template>
  <!-- <div><span @click="handleSave()">保存</span></div> -->
  <DocumentEditor id="docEditor" :documentServerUrl="onlyofficeServerUrl" :config="config" />
  <div id="placeholder" class="nav" style="width: 100%; height: 100vh"></div>
</template>
<script setup>
  import { DocumentEditor } from '@onlyoffice/document-editor-vue';
  import { reactive, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { useUserStore } from '/@/store/modules/user';

  const { currentRoute } = useRouter();

  const onlyofficeServerUrl = ref('');

  let type = currentRoute.value?.query?.type;
  let id = currentRoute.value?.query?.id;
  let actionId = currentRoute.value?.query?.actionId;
  let mode = currentRoute.value?.query?.mode;
  let moduleCode = currentRoute.value?.query?.moduleCode;
  let token = currentRoute.value?.query?.token;
  let name = currentRoute.value?.query?.name;
  let ext = currentRoute.value?.query?.ext;
  let flowId = currentRoute.value?.query?.flowId;
  onlyofficeServerUrl.value = currentRoute.value?.query?.onlyofficeServerUrl;
  console.log('onlyofficeServerUrl', onlyofficeServerUrl.value);

  const userStore = useUserStore();
  const userInfo = userStore.getUserInfo;
  const serverInfo = userStore.getServerInfo;
  const rootPath = serverInfo.rootPath;

  let url;
  if (type == 'flow') {
    url = rootPath + '/flow/download?skey=' + token + '&flowId=' + flowId + '&attachId=' + id;
  } else {
    url = rootPath + '/visual/download?skey=' + token + '&attachId=' + id;
  }

  let isDebug = false;
  let callbackUrl = '';
  if (isDebug) {
    url = 'http://developer.xiaocaicloud.com/oa/public/images/demo.docx?token=' + token;
    callbackUrl = 'http://123.60.141.47:8088/oa/onlyoffice/callback?skey=' + token;
  } else {
    callbackUrl = rootPath + '/onlyoffice/callback?skey=' + token;
  }

  let documentType = 'word';
  if (ext == 'xls' || ext == 'xlsx') {
    documentType = 'cell';
  } else if (ext == 'ppt' || ext == 'pptx') {
    documentType = 'slide';
  } else if (ext == 'wps' || ext == 'wpt' || ext == 'pdf' || ext == 'htm' || ext == 'html') {
    documentType = 'word';
  }

  const config = reactive({
    documentType: documentType,
    document: {
      title: name,
      url: url,
      // 当前用户对于当前文档的操作权限
      permissions: {
        // 启用评论
        comment: false,
        // 启用下载
        download: true,
        // 启用编辑
        edit: true,
        // 启用导出
        print: true,
        // 启用预览
        review: true,
      },
      fileType: ext, //文件类型
      //文档标识符
      key: type + '_' + id + '_' + Date.now(),
    },
    editorConfig: {
      // 编辑器常规配置
      customization: {
        // 自动保存可以关闭，常规ctrl+s更好用
        autosave: false,
        forcesave: true,
        compactToolbar: true,
        forcesave: true,
        toolbarNoTabs: true,
        help: false,
        compactHeader: true,
        hideRightMenu: true,
        logo: {
          //自定义logo配置
          image: '/resource/img/logo.png',
          imageDark: '/resource/img/logo.png',
          url: '/resource/img/',
          visible: true,
        },
      },
      mode: mode == 'w' ? 'edit' : 'view', //view为只能浏览  edit为编辑
      // 回调
      callbackUrl: mode == 'w' ? callbackUrl : '',
      // 菜单显示语言
      lang: 'zh-CN',
      // 当前操作用户信息
      user: {
        name: userInfo.realName,
        id: userInfo.name,
      },
    },
    events: {
      onAppReady: function () {
        window.editor = this; // 保存编辑器实例
      },
      onRequestSaveAs: function (event) {
        // 处理另存为请求（手动保存时触发）
        console.log('保存数据:', event.data);
      },
      onDocumentStateChange: function (event) {
        if (event.data) {
          console.log('The document changed');
          console.log('event', event);
          console.log('event.data', event.data);
        } else {
          console.log('event', event);
          console.log('Changes are collected on document editing service');
        }
      },
    },
  });
</script>
<style>
  html,
  body {
    height: 100%;
    width: 100%;
    margin: 0px;
  }
</style>
